<template>
  <z-select
    v-model:value="value"
    style="width: 240px"
    :options="items.map(item => ({ value: item }))"
  >
    <template #dropdownRender="{menu: menu}">
      <v-nodes :vnodes="menu" />
      <z-divider style="margin: 4px 0" />
      <div
        style="padding: 4px 8px; cursor: pointer"
        @mousedown="e => e.preventDefault()"
        @click="addItem"
      >
        <plus-outlined />
        Add item
      </div>
    </template>
  </z-select>
</template>
<script>
import { defineComponent, ref } from 'vue'
let index = 0

export default defineComponent({
  name: 'SelectDemo7',
  components: {
    VNodes: (_, {
      attrs,
    }) => {
      return attrs.vnodes;
    }
  },
  setup() {
    const items = ref(['jack', 'lucy'])
    const value = ref('lucy')
    const addItem = () => {
      items.value.push(`New item ${index++}`)
    }
    return {
      items,
      value,
      addItem
    }
  }
})
</script>
